<script>
import { defineComponent, ref, onMounted } from '@vue/composition-api';
import { checkActivity, GetUserList, GetActivityDetail } from '@/api/activity';
import router from '@/router';
import { mapGetters } from 'vuex';
import { ActivityStatusMap, ActivityContentMap, ActivityTypeMap, TypeMaps, ActivityMap,Activity1Map } from '../enum';
import { MessageBox, Message } from 'element-ui';
import { getToken } from '@/utils/auth';
import { download } from '@/utils/request';
import Clipboard from 'clipboard';
export default defineComponent({
  props: {
    activityId: String,
  },
  computed: {
    ...mapGetters(['name']),
  },
  setup(props) {
    const detail = ref({})
    const checkRemark = ref();
    const curSteps = ref(2);
    const stepsText = ref("");
    const uploadHeaders = ref({ Authorization: 'Bearer ' + getToken() });
    const uploadFileUrl = process.env.VUE_APP_BASE_API + '/committee/activity/update/activitySummary?activityId=' + props.activityId;
    const formModel = ref({
      type: null,
      checkRemark: null,
      overCheckRemark: null,
    });
    const loading = ref(false);
    const formRef = ref();
    const placeFileList = ref([]);
    // 获取列表
    const getActivityDetail = async () => {
      const response = await GetActivityDetail(props.activityId);
      if (response.code === 200) {
        detail.value = response.data;
      }
    };

    //预览
    const preview = fileName => {
      console.log(fileName, 'fileName');
      window.open(
        'https://ow365.cn/?i=29710&ssl=1&furl=' + process.env.VUE_APP_BASE_API + '/api/images/showLocal?name=' +
          fileName
      );
    };
    const openUrl = fileName => {
      // window.open(process.env.VUE_APP_BASE_API +fileName);
      download(
        '/common/download/resource',
        {
          fileName
        },
        `${fileName}${new Date().getTime()}.xlsx`
      );
    };

    const handleUploadError = () => {
      Message.error({
        message: '上传失败',
      });
    };

    const handleUploadSuccess = res => {
      console.log(res, 'resssss');
      if (res.code == 200) {
        Message({
          message: '上传成功',
          type: 'success',
        });
        placeFileList.value = []
        getActivityDetail()
      } else {
        Message.error({
          message: '上传失败',
        });
      }
    };

    onMounted(() => {
      // loadData();
      getActivityDetail()
    });

    return {
      ActivityStatusMap,
      ActivityContentMap,
      ActivityTypeMap,
      preview,
      detail,
      getActivityDetail,
      openUrl,
      uploadFileUrl,
      handleUploadError,
      handleUploadSuccess,
      uploadHeaders,
      placeFileList,
      checkRemark,
      curSteps,
      stepsText,
      formModel,
      formRef,
      TypeMaps,
      ActivityMap,
      Activity1Map,
    };
  },
});
</script>

<template>
  <div class="app-container">
    <el-row>
      <el-descriptions border :column="2">
        <el-descriptions-item>
          <template slot="label"> 活动名称 </template>
          {{ detail.activityName }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 活动形式 </template>
          {{ ActivityStatusMap.get(detail.activityStatus) }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 活动类型 </template>
          {{ TypeMaps.get(detail.activityContent) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动等级 </template>
          {{ ActivityMap.get(detail.activityGrade) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 主办单位 </template>
          {{ detail.hostName }}
        </el-descriptions-item>
        <!-- <el-descriptions-item>
          <template slot="label"> 活动审核 </template>
          {{ detail.needAudit }}
        </el-descriptions-item> -->
        <el-descriptions-item>
          <template slot="label"> 活动时间 </template>
          {{ `${detail.activityStartTime} - ${detail.activityEndTime}` }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动地点 </template>
          {{ detail.position }}
        </el-descriptions-item>
        <el-descriptions-item :span='2'>
          <template slot="label"> 活动简介 </template>
          {{ detail.txt }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 海报 </template>
          <el-image
            v-if="detail.postId"
            style="width: 100px; height: 100px"
            :src="detail.postId"
            :preview-src-list="[detail.postId]"
            fit="cover"
          >
          </el-image>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 学分 </template>
          {{ detail.mark }}
        </el-descriptions-item>
        
        <el-descriptions-item>
          <template slot="label"> 是否需要签退 </template>
          {{ detail.isNeedSignOut }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 活动级别 </template>
          {{ Activity1Map.get(detail.activityRank) }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 最大报名人数 </template>
          {{ detail.applyCount }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 管理员1 </template>
          {{ detail.adminId }}{{ detail.adminPhone ? ' - ' + detail.adminPhone : '' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 管理员2</template>
          {{ detail.adminId2 ? detail.adminId2 : ''
          }}{{ detail.adminPhone2 ? ' - ' + detail.adminPhone2 : '' }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 报名截止时间 </template>
          {{ detail.applyEndTime }}
        </el-descriptions-item>
        <el-descriptions-item :span="2">
          <template slot="label"> 场地 </template>
          {{ detail.siteId }}
        </el-descriptions-item>
        </el-descriptions>
    </el-row>
    <el-row style="padding-top: 10px">
      <el-button type="text" @click="openUrl(detail.activitySummary)"
            >{{ detail.activitySummary ? detail.activitySummary.substring(detail.activitySummary.lastIndexOf('\/')) : '' }}
            <span v-if="detail.activitySummary" >下载</span></el-button
          >
      <el-upload
        :action="uploadFileUrl" :limit="1" :headers="uploadHeaders"
       :on-error="handleUploadError" :on-success="handleUploadSuccess"
        :file-list="placeFileList" >
        <el-button size="small" type="primary" v-if="!detail.activitySummary">活动总结</el-button>
        <el-button size="small" type="primary" v-if="detail.activitySummary">修改总结</el-button>
      </el-upload>
    </el-row>
  </div>
</template>
<style scoped>
::v-deep .el-step .el-step__description {
  white-space: pre-line;
}
</style>
